<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            visibility: visible;
        }
    </style>
</head>

<body>

    <div id="box">Lorem ipsum dolor sit amet.</div>
    <button id="btn">隐藏/显示</button>

    <script>

        //设置元素的内嵌样式

        let div = document.getElementById('box');
        let btn = document.getElementById('btn');
        //如果是有连字符的属性，需要改成驼峰命名法
        div.style.color = 'red';
        console.log(div.style.color);
        // div.style.width = '200px'
        // div.style.height = '200px'
        // div.style.backgroundColor='black'

        //属性名不需要驼峰命名法，直接按css语法写就行
        div.style.cssText = `
        width: 200px;
        height: 200px;
        border: 2px solid;
        background-color: royalblue;
        color: red;
        `


        // 例：点击按钮隐藏或显示元素

        btn.onclick = function () {
            div.style.visibility == 'hidden' ?
                div.style.visibility = 'visible' :
                div.style.visibility = 'hidden';

        }


        // 练习：点击按钮随机切换背景色



    </script>

</body>

</html>